<template>
  <div>
    <div
      class="card mb-4"
    >
      <div class="card-content">
        <div class="content">
          {{ note.content }}
          <div
            class="has-text-right has-text-grey-light mt-2"
          >
            <small>100 字</small>
          </div>
        </div>
      </div>
      <footer class="card-footer">
        <router-link
          :to="`/editNote/${note.id}`"
          class="card-footer-item"
        >
          编辑
        </router-link>
        <a
          class="card-footer-item"
          href="#"
          @click="handleDeleteClick"
        >
          删除
        </a>
      </footer>
    </div>
    <ModalDeleteNote @message="handleMessage" v-if="showModal"></ModalDeleteNote>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { useNodesStore } from '@/store/notesStore.js'
  import ModalDeleteNote from '@/components/Notes/ModalDeleteNote.vue'

  const props = defineProps({
    note: {
      type: Object,
      required: true
    }
  })

  const notesStore = useNodesStore()
  const { deleteNote } = notesStore

  const showModal = ref(false)
  const handleMessage = (value) => {
    deleteNote(props.note.id)
    showModal.value = false
  }

  const handleDeleteClick = () => {
    showModal.value = true
  }

</script>